<template>
	<view class="rela">
		<cu-custom rightAll>
			转账结果
		</cu-custom>
		<template v-if="infos">
			<view
				class="result-top padding-bottom-lg color-theme u-flex-y u-flex-items-center u-flex-center bgcolor-ffffff">
				<image class="result-img" src="/static/transfer-account/success2x.png"
					mode="aspectFit">
					<view class="resutl-money u-flex">
						<text class="margin-right-sm">
							￥{{priceFormat(infos.amountMoney)}}
						</text>
						转账成功
					</view>
					<view class="menu u-flex u-flex-around w100 ">
						<text>
							继续转账
						</text>
						<text>
							转账记录
						</text>
					</view>
			</view>
			<feedback-fixed></feedback-fixed>

			<view class="result-main padding-lg u-flex-y u-flex-items-center" style="background-color: #f8f8f8;">
				<view class="result-item u-flex u-flex-items-center u-flex-between w100">
					付款账号:
					<text>
						{{formatCardNum(infos.paymentAccount)}}
					</text>
				</view>
				<view class="result-item u-flex u-flex-items-center u-flex-between w100">
					收款人:
					<text>
						{{infos.receivingName}}
					</text>
				</view>
				<view class="result-item u-flex u-flex-items-center u-flex-between w100">
					收款账号:
					<text>
						{{infos.oppositeAccount.replace(/[^0-9]/g, '').replace(/(\S{4})(?=\S)/g, '$1 ')}}
					</text>
				</view>
				<view class="result-item u-flex u-flex-items-center u-flex-between w100">
					开户行:
					<text>
						{{_userinfo.network}}
					</text>
				</view>
				<view class="result-item u-flex u-flex-items-center u-flex-between w100">
					手续费:
					<text>
						￥0.00
					</text>
				</view>
				<view class="result-item u-flex u-flex-items-center u-flex-between w100">
					受理方式:
					<text>
						{{payMethods[infos.acceptanceMethod]}}
					</text>
				</view>
				<view class="result-item u-flex u-flex-items-center u-flex-between w100">
					交易日期:
					<text>
						{{getDate(infos.createTime)}}
					</text>
				</view>
			</view>
			<view class="result-bottom u-flex-y padding-lr-lg bgcolor-ffffff">
				<view class="buttons u-flex u-flex-between u-flex-items-center">
					<view class="text-center btn" @click="$Router.pushTab({ name: 'index' })">
						完成
					</view>
					<view class="text-center btn" @click="toReceipt">
						电子回单
					</view>
				</view>
			</view>
			<view class="ad-box padding-lr bgcolor-ffffff">
				<image src="/static/transfer-account/ad.jpg" mode="scaleToFill"></image>
			</view>
		</template>
	</view>
</template>

<script>
	import { PAY_METHODS } from '@/common/data/Enum.js';
	export default {
		data() {
			return {
				infos: null,
				payMethods: PAY_METHODS
			};
		},
		async onLoad() {
			this.$Tips.loading('请稍后...');
			try {
				const res = await this.$api.getBankFlowingwaterOne({
					id: this.$store.state.params.id
				});
				this.infos = res.data.data;
			} catch (e) {
				//TODO handle the exception
				console.debug('onLoad err', e);
			} finally {
				this.$Tips.loaded();
			}
		},
		methods: {
			toReceipt() {
				this.$store.dispatch('set_params', { id: this.infos.id });
				this.$Router.push({
					name: 'e-receipt',
				});
			},
			getDate(date) {
				return this.$u.date(new Date(date).getTime(), 'yyyy/mm/dd hh:MM');
			},
			back() {
				this.$Router.pushTab({
					name: 'index'
				});
			}
		}
	};
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.result-top {
		padding-top: 50rpx;
		font-size: 32rpx;
		color: rgb(24, 159, 26);
		border-bottom: 2rpx solid rgb(222, 222, 222);

		.result-img {
			width: 160rpx;
			height: 160rpx;
		}

		.resutl-money {
			margin-top: 10rpx;
			margin-bottom: 60rpx;
		}

		.menu {
			position: relative;

			&:before {
				content: '';
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				width: 2rpx;
				height: 40rpx;
				background-color: rgb(224, 224, 224);
			}
		}
	}

	.result-main {
		border-bottom: 2rpx solid rgb(236, 236, 236);

		.result-item {
			margin-bottom: 20rpx;
			font-size: 30rpx;
			color: rgb(114, 114, 114);

			&:nth-last-child(1) {
				margin-bottom: 0;
			}
		}
	}

	.result-bottom {
		padding-top: 60rpx;

		.buttons {
			margin-bottom: 50rpx;

			.btn {
				color: #fff;
				@include themeBgColor;
				font-size: 30rpx;
				padding: 20rpx 0;
				width: 49%;
				border-radius: 12rpx;
			}
		}
	}

	.ad-box {
		image {
			width: 100%;
			height: 350rpx;
			border-radius: 20rpx;
		}
	}
</style>
